<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<html>

	<head>
		<meta charset="utf-8">
		<title>修改信息</title>
		<style>
			.demobox{
				position: absolute;
				left: 10%;
				background: #fff; 
			}
			.border{
				width: 80%;
				border: 1px solid grey;
				
			}
			body,a {
				font-size: 14px;
				color: #666;
			}
			
			ul,li {
				margin: 0;
				padding: 0;
				list-style: none
			}
			
			.fn-vhid {
				visibility: hidden;
			}
			
			.fn-tinput {
				width: 240px;
				height: 30px;
				line-height: 30px\9;
				border: #ddd solid 1px;
				background-color: transparent;
				padding: 0 6px;
			}
			
			textarea {
				border: #ddd solid 1px;
				background-color: transparent;
				width: 60%
			}
			
			.fn-tinput:focus,textarea:focus {
				border-color: #c00;
			}
			
			.bl-form label {
				float: left;
				width: 100px;
				text-align: right;
				padding-top: 6px;
			}
			
			.bl-form .controls label {
				width: auto;
			}
			
			.bl-form li {
				margin-top: 20px;
				overflow: hidden;
			}
			
			em,strong {
				color: #C00;
			}
			
			span.error {
				color: #C00;
				padding: 0 6px;
			}
			h3{
				margin:10px 0px 10px 20px;
			}
            .bl-form select{
                width: 145px;
                margin-left: 20px;
                margin-right: 15px;
            }


        </style>
		
	</head>

	<body>
	
			<div class="demobox border">
			
			<form class="bl-form bl-formhor" id="jsForm" action="js/test.json" method="post" novalidate="novalidate">
				<ul>
					<li class="bl-form-group">
						<h3 style="float: left;">修改信息</h3>
                        <%
                            String firstRegister = (String) request.getAttribute("firstRegister");
                            if (firstRegister != null) {
                                out.print("<p style=\"float: left;color: red;margin-left: 10px;\">请先完善信息</p>");
                            }
                        %>
					</li>

                    <%
                        String nickName = (String) request.getAttribute("nickName");
                        String schoolName = (String) request.getAttribute("schoolName");
                        String major = (String) request.getAttribute("major");
                        String intro = (String) request.getAttribute("intro");
                    %>


					<hr />
					<li class="bl-form-group">
						<label><em>*</em>昵称：</label>
						<div class="controls">
							<input name="nickName" class="fn-tinput" id="nickName"
                                   value="<%=nickName == null ? "null" : java.net.URLDecoder.decode((String) request.getAttribute("nickName"), "utf-8")%>"
                                   required="" type="text" placeholder="请输入真实姓名" data-msg-minlength="至少输入2个字符" minlength="2" data-msg-required="请输入真实姓名">
						</div>
					</li>
                    <li class="bl-form-group">
                        <label><em>*</em>手机号码：</label>
                        <div class="controls">
                            <input name="nickName" class="fn-tinput" id="phoneNumber" disabled="disabled" style="background: #e4e4e4"
                                   value="${requestScope.phoneNumber}"
                                   required="" type="text" placeholder="请输入真实姓名" data-msg-minlength="至少输入2个字符" minlength="2" data-msg-required="请输入真实姓名">
                        </div>
                    </li>
					<li class="bl-form-group">
						<label><em>*</em>学校：</label>
						<div class="controls">
							<input name="school" class="fn-tinput" id="schoolName"
                                   value="<%=schoolName == null ? "null" : java.net.URLDecoder.decode((String) request.getAttribute("schoolName"), "utf-8")%>"
                                   required="" type="text" placeholder="请输入学校名称" data-msg-required="学院名称不能为空">
						</div>
					</li>

                    <li class="bl-form-group">
                        <label><em>*</em>我的职业：</label>
                        <div class="controls" style="padding-top: 6px;">
                            <input type="radio" name="userType" value="1" <c:if test="${requestScope.userType eq 1}">checked</c:if>>学生
                            <input type="radio" name="userType" value="2" <c:if test="${requestScope.userType eq 2}">checked</c:if>>老师
                        </div>
                    </li>

					<li class="bl-form-group">
						<label><em>*</em>专业：</label>
						<div class="controls">
							<input name="major" class="fn-tinput" id="major"
                                   value="<%=major == null ? "null" : java.net.URLDecoder.decode((String) request.getAttribute("major"), "utf-8")%>"
                                   required="" type="text" placeholder="请输入专业名称" data-msg-required="专业名称不能为空">
						</div>
					</li>

                    <li class="bl-form-group">
                        <div>
                            <label>联系方式：</label>
                            <select name="select1" id="contactType">
                                <option value="0">----选择联系方式----</option>
                                <option value="3" <c:if test="${requestScope.contactType eq 3}">selected</c:if>>邮箱</option>
                                <option value="1" <c:if test="${requestScope.contactType eq 1}">selected</c:if>>qq</option>
                                <option value="2" <c:if test="${requestScope.contactType eq 2}">selected</c:if>>微信</option>
                            </select>
                                    <input name="contect_type" class="fn-tinput" id="contact"
                                           value="${requestScope.contact}"
                                           required="" type="text" placeholder="邮箱/qq/微信">
                        </div>
                    </li>


                    <li class="bl-form-group">
						<label>个人简介：</label>
						<div class="controls editor">
							<textarea name="textarea1" id="intro"
                                      required="" rows="4" cols="20"><%=intro == null ? "null" : java.net.URLDecoder.decode((String) request.getAttribute("intro"), "utf-8")%></textarea>
						</div>
					</li>
					<hr />
					<li class="bl-form-group bl-form-btns">
						<label class="fn-vhid">提交：</label>
						<div class="controls">
							<button onclick="modifyInfo()">保存</button>
						</div>
					</li>
				</ul>
			</form>
		</div>
	
		
		<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery-validate/1.11.1/jquery.validate.min.js"></script>
            <script src="/js/center.js"></script>

		<script>
			$(function() {
				//jquery.validate
				$("#jsForm").validate({
					submitHandler: function() {
						//验证通过后 的js代码写在这里
					}
				})

			})

			//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
			$.validator.setDefaults({
				errorElement: 'span'
			});

			//配置通用的默认提示语
			$.extend($.validator.messages, {
				required: '必填',
				equalTo: "请再次输入相同的值"
			});

			//邮箱 
			jQuery.validator.addMethod("mail", function(value, element) {
				var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
				return this.optional(element) || (mail.test(value));
			}, "邮箱格式不对");

			//电话验证规则
			jQuery.validator.addMethod("phone", function(value, element) {
				var phone = /^0\d{2,3}-\d{7,8}$/;
				return this.optional(element) || (phone.test(value));
			}, "电话格式如：0371-68787027");

			//区号验证规则  
			jQuery.validator.addMethod("ac", function(value, element) {
				var ac = /^0\d{2,3}$/;
				return this.optional(element) || (ac.test(value));
			}, "区号如：010或0371");

			//无区号电话验证规则  
			jQuery.validator.addMethod("noactel", function(value, element) {
				var noactel = /^\d{7,8}$/;
				return this.optional(element) || (noactel.test(value));
			}, "电话格式如：68787027");

			//手机验证规则  
			jQuery.validator.addMethod("mobile", function(value, element) {
				var mobile = /^1[3|4|5|7|8]\d{9}$/;
				return this.optional(element) || (mobile.test(value));
			}, "手机格式不对");

			//邮箱或手机验证规则  
			jQuery.validator.addMethod("mm", function(value, element) {
				var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
				return this.optional(element) || (mm.test(value));
			}, "格式不对");

			//电话或手机验证规则  
			jQuery.validator.addMethod("tm", function(value, element) {
				var tm = /(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
				return this.optional(element) || (tm.test(value));
			}, "格式不对");

			//年龄
			jQuery.validator.addMethod("age", function(value, element) {
				var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
				return this.optional(element) || (age.test(value));
			}, "不能超过120岁");
			///// 20-60   /^([2-5]\d)|60$/

			//传真
			jQuery.validator.addMethod("fax", function(value, element) {
				var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
				return this.optional(element) || (fax.test(value));
			}, "传真格式如：0371-68787027");

			//验证当前值和目标val的值相等 相等返回为 false
			jQuery.validator.addMethod("equalTo2", function(value, element) {
				var returnVal = true;
				var id = $(element).attr("data-rule-equalto2");
				var targetVal = $(id).val();
				if(value === targetVal) {
					returnVal = false;
				}
				return returnVal;
			}, "不能和原始密码相同");

			//汉字
			jQuery.validator.addMethod("chinese", function(value, element) {
				var chinese = /^[\u4E00-\u9FFF]+$/;
				return this.optional(element) || (chinese.test(value));
			}, "格式不对");

			//指定数字的整数倍
			jQuery.validator.addMethod("times", function(value, element) {
				var returnVal = true;
				var base = $(element).attr('data-rule-times');
				if(value % base != 0) {
					returnVal = false;
				}
				return returnVal;
			}, "必须是发布赏金的整数倍");

			//身份证
			jQuery.validator.addMethod("idCard", function(value, element) {
				var isIDCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; //(15位)
				var isIDCard2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; //(18位)

				return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
			}, "格式不对");
		</script>

	</body>

</html>
